<template>
  <n-config-provider
    :theme="
      commonVar.theme === 'light'
        ? null
        : commonVar.theme === 'system'
        ? osTheme
        : darkTheme
    "
    :theme-overrides="themeOverrides"
    :locale="commonVar.locale"
    :date-locale="commonVar.dateLocale"
  >
    <div v-if="commonVar.watermark">
      <n-message-provider>
        <n-watermark
          content="Naive-Admin-Pro"
          cross
          :font-size="16"
          :line-height="16"
          :width="384"
          :height="384"
          :x-offset="12"
          :y-offset="60"
          :rotate="-15"
        >
          <router-view v-slot="{ Component }">
            <!-- 添加动画效果 -->
            <transition name="fade">
              <component :is="Component" />
            </transition>
          </router-view>
        </n-watermark>
      </n-message-provider>
    </div>
    <div v-else>
      <n-message-provider>
        <router-view v-slot="{ Component }">
          <!-- 添加动画效果 -->
          <transition name="fade">
            <component :is="Component" />
          </transition>
        </router-view>
      </n-message-provider>
    </div>
  </n-config-provider>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { darkTheme, useOsTheme } from "naive-ui";
import { useThemeStore } from "@/stores/models/theme";
import { setThemeOverrides } from "@/utils/setThemeOverrides.js";

const themeStore = useThemeStore();
const commonVar = themeStore.commonVar;
const osThemeRef = useOsTheme();
const osTheme = computed(() =>
  osThemeRef.value === "dark" ? darkTheme : null
);
const themeOverrides = ref({});

onMounted(() => {
  themeOverrides.value.common = setThemeOverrides();
});

//监听主题色覆盖配置的变化
watch(
  () => themeStore.themeConfig,
  (newValue, oldValue) => {
    themeOverrides.value.common = setThemeOverrides();
  },
  {
    deep: true,
  }
);
</script>

<style>
/* 设置根元素的高度为100% */
#app {
  height: 100%;
}

/* 设置进入动画效果 */
.fade-enter-active {
  transition: opacity 0.5s, transform 0.5s;
}

/* 设置从出动画效果 */
.fade-enter-from {
  opacity: 0;
  transform: scale(0.9);
}

.fade-enter-to {
  opacity: 1;
  transform: scale(1);
}
</style>